<template>
    <div class="wrapper">
      <h2>在 线 捐 赠</h2>
      <div class="contents">
        <div class="donationInfo">
          <h4>捐赠信息</h4>
          <el-divider></el-divider>
          <div>
            <el-row>
              <el-col :span="4" style="text-align: center;">
                <img src="../../assets/img/zyjs-fund.jpg">
              </el-col>
              <el-col :span="8">
                <div class="item">职业技术师范学院发展基金</div>
              </el-col>
              <el-col :span="12" class="abstract">
                <span>简介：</span>
                <p>
                  该基金是我校教育发展基金会下设的专项基金，由校教育发展基金会、职业技术师范学院联合发起。
                  本项目基金旨在帮助学校办学，促进学校的教学、科研和人才培养的发展，为学校办学、助学和乡村振兴等
                  活动的开展提供资金支持。
                </p>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="donationPersonal">
          <h4>捐赠人信息</h4>
          <el-divider></el-divider>
          <div class="formWrapper">
            <el-form :model="donation" ref="ruleForm" label-width="20%" size="mini">
              <el-form-item label="真实姓名" prop="name" >
                <el-input v-model="donation.realName"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex" >
                <el-radio-group v-model="donation.sex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="手机号" prop="phone" >
                <el-input v-model="donation.phone"></el-input>
              </el-form-item>
              <el-form-item label="入学院系" prop="college" >
                <el-input v-model="donation.college"></el-input>
              </el-form-item>
              <el-form-item label="校友身份/其他" prop="identity" >
                <el-select v-model="donation.isAlumni" placeholder="请选择您的身份">
                  <el-option label="校友" :value="1"></el-option>
                  <el-option label="其他" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="入学年份" prop="enrollmentYear" >
                <el-date-picker
                  v-model="donation.enrollmentYear"
                  type="year"
                  placeholder="选择入学年份">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="捐赠金额" prop="amount" >
                <el-input v-model="donation.amount">
                  <template slot="prefix">￥</template>
                </el-input>
              </el-form-item>
              <el-form-item label="捐赠备注" prop="remarks" >
                <el-input v-model="donation.donationName"></el-input>
              </el-form-item>
              <el-form-item label="相对母校说" prop="describe">
                <el-input type="textarea" v-model="donation.details"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="payType">
          <h4>付款方式</h4>
          <el-divider></el-divider>
          <div style="padding: 10px 0; text-align: center">
            <el-radio-group v-model="donation.payType">
              <el-radio label="微信支付"></el-radio>
              <el-radio label="支付宝支付"></el-radio>
              <el-radio label="银行转账"></el-radio>
            </el-radio-group>
          </div>
        </div>
        <div style="text-align: center">
          <el-button @click="submitDonation">马上捐赠</el-button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "DonationOnline",
        data(){
            return{
                donation: {
                    realName: '',
                    sex: '',
                    phone: '',
                    college: '',
                    enrollmentYear: '',
                    donationName: '',
                    donationObject: '职业技术师范学院发展基金',
                    details: '',
                    amount: null,
                    donationType: 1,
                    isAlumni: 0,
                    payType: '微信支付',
                    alumniId: null,
                    createBy: 0,
                    createTime: ''
                },
                currentUser: {},
                alumni: {},
                oldInfo: ''
            }
        },
        methods: {
            getAlumni(){
                if(!this.currentUser){
                    this.oldInfo=JSON.stringify(this.donation);
                    return false;
                }
                const params={alumniId: this.currentUser.alumniId};
                this.getRequest('/getAlumniDetail', params).then(res=>{
                    if(res){
                        this.alumni=res;
                        this.donation.realName=res.realName;
                        this.donation.sex=res.sex;
                        this.donation.phone=this.currentUser.phone;
                        this.donation.isAlumni=1;
                        this.donation.alumniId=res.alumniId;
                        this.donation.college=res.college.collegeName;
                        this.donation.enrollmentYear=this.alumni.admissionDate;
                    }else{
                        console.log('获取当前校友信息失败!');
                    }
                    this.oldInfo=JSON.stringify(this.donation);
                })
            },
            submitDonation(){
                if(this.donation.donationName==='' || this.donation.details==='' || this.donation.realName===''){
                    this.$message.error('请输入所有关键信息！');
                    return false;
                }
                if (this.donation.amount < 1){
                    this.$message.error('捐赠金额不能小于1元！');
                    return false;
                }
                this.donation.createBy=this.currentUser ? this.currentUser.userId : 0;
                this.donation.createTime=this.datetime2string(new Date());
                this.postRequest('/addDonation', this.donation).then(res=>{
                    if(res){
                        this.$message.success('捐赠成功！');
                        this.donation=JSON.parse(this.oldInfo);
                    }else{
                        this.$message.error('操作失败！');
                    }
                })
            }
        },
        created() {
            const user=sessionStorage.getItem('currentUser');
            this.currentUser=JSON.parse(user);
            this.getAlumni();
        }
    }
</script>

<style scoped>
  .wrapper{
    margin-left: 5%;
    padding-left: 5%;
    padding-right: 5%;
    background-color: #F0F4F7;
  }
  h2{
    text-align: center;
    color: #0057A7;
    padding: 20px 0;
  }
  h4{
    font-size: 15px;
    padding-left: 2%;
    border-left: solid 3px #a11c78;
    font-weight: normal;
  }
  .el-divider{
    margin: 10px 0;
    background-color: #a11c78;
  }
  .contents{
    width: 100%;
  }
  .el-row{
    width: 100%;
  }
  img{
    width: 100%;
  }
  .item{
    text-align: center;
    font-size: medium;
    font-weight: bold;
    height: 100px;
    line-height: 100px;
  }
  .abstract span{
    font-weight: bold;
    font-size: 15px;
  }
  .abstract p{
    font-size: 14px;
  }
  .donationInfo, .donationPersonal, .payType{
    background-color: white;
    padding: 10px 5px;
  }
  .donationPersonal{
    margin: 30px 0;
  }
  .formWrapper{
    width: 60%;
    margin: 0 auto;
  }
  .payType{
    height: 100px;
  }
  .el-button{
    margin: 20px 0;
    background-color: #a11c78;
    color: white;
  }
</style>
